// 导入compression-webpack-plugin
// 定义多页面配置

const path = require("path");
const spritesList = require("./build/sprite"); //精灵图插件函数
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// const PrerenderSPAPlugin = require("prerender-spa-plugin");
// const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const Pages =  require('./build/entry')
const resolve = (dir) => {
  return path.join(__dirname, dir);
};
const Setting = require('./setting.env')
module.exports = {
  publicPath: Setting.publicPath,
  pages: Pages,
  assetsDir: Setting.assetsDir,
  outputDir: Setting.outputDir,
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: Setting.productionSourceMap,
  css: {
    extract: true,
    loaderOptions: {
      less: {
        globalVars: {
          hack: `true; @import '~@/assets/css/common.less';@import '~@/assets/css/test.less'`,
        },
      },
    },
  },
  /**
   * [chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。]
   * @param  {[type]} config [description]
   * @return {[type]}        [description]
   */
  chainWebpack: (config) => {
    Object.keys(Pages).map((item) => {
      config.plugins.delete(`preload-${item}`) // 多页面移除预加载减少手机用户流量的使用
      config.plugins.delete(`prefetch-${item}`)
      config.plugin(`html-${item}`).tap((args) => {
        let cdnList = []
        let cssList = []
        // cdn和埋点地址
        cdnList.push((process.env && process.env.VUE_APP_VUE_URL) || Setting.publicPath + "cdn/vue.min.js")
        cdnList.push((process.env && process.env.VUE_APP_AXIOS_URL) || Setting.publicPath + "cdn/axios.min.js")
        args[0].cdnList = cdnList
        args[0].cssList = cssList
        return args;
    });
    })
    config.plugins.delete("preload") // 移除预加载减少手机用户流量的使用
    config.plugins.delete("prefetch")
    // 移除pwa
    config.plugins.delete('pwa');
    config.plugins.delete('workbox');
    
    config.resolve.alias
      .set("@", resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("@images", resolve("src/assets/images"))
      .set("@fonts", resolve("src/assets/fonts"))
      .set("@css", resolve("src/assets/css"))
      .set("@utils", resolve("src/libs/utils"))
      .set("@api", resolve("src/api"))
    if (process.env.NODE_ENV === "production") {
      if (process.env.VUE_APP_CURRENTMODE === "analyz") {
        config
          .plugin("webpack-bundle-analyzer")
          .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin)
          .end();
      }
    }
  },
  /**
   * [configureWebpack 提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置（以函数方式配置或者以插件方式配置webpack）]
   * @param  {[type]} config [description]
   * @return {[type]}        [description]
   */
  configureWebpack: (config) => {
    const plugins = config.plugins
    // 配置cdn
    config.externals = {
      // vant使用页面内按需引入，不做配置
      vue: "Vue",
      axios: "axios",
    };
    if (spritesList.length > 0) {
      plugins.push(...spritesList)
    }
    // 特殊情况可以使用异步引入或者externals配合cdn引入操作进入优化
    // 配置cacheGroups拆分的文件需要在根目录/build/entry.js修改entryList[entryName],增加入口文件依赖
    Object.assign(config.optimization.splitChunks.cacheGroups, {
      
      // 分离组件库，可拆分echarts等大型包文件
      // echarts: { // split echarts libs
      //   name: 'chunk-echarts',
      //   test: /[\\/]node_modules[\\/]_?echarts(.*)/,
      //   priority: 50,
      //   chunks: 'async'
      // },
      // zrender: { // split zrender libs
      //   name: 'chunk-zrender',
      //   test: /[\\/]node_modules[\\/]_?zrender(.*)/,
      //   priority: 55,
      //   chunks: 'async'
      // },
      vant: { // split zrender libs
        name: 'chunk-vant',
        test: /vant/,
        priority: 20,
        chunks: 'all'
      },
      i18n: { // split zrender libs
        name: 'chunk-i18n',
        test: /vue-i18n/,
        priority: 20,
        chunks: 'all'
      },
        })
    if (process.env.NODE_ENV === "production") {
      // 生产环境
      plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: /\.js$|\.html$|\.css/,
          threshold: 10240, // 对超过10k的数据进行压缩
          deleteOriginalAssets: false, // 是否删除原文件
        })
      );
      config.optimization.minimizer.map((arg) => {
        const option = arg.options.terserOptions.compress;
        option.drop_console = true; // 打开开关
        option.drop_debugger = true; // 打开开关
        return arg;
      });
      // plugins.push(
      //   new PrerenderSPAPlugin({
      //     // 生成文件的路径，也可以与webpakc打包的一致。
      //     // 下面这句话非常重要！！！
      //     // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      //     staticDir: path.join(__dirname, "dist"),

      //     // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
      //     routes: ["/", "/about"],

      //     // 预渲染代理接口
      //     server: {
      //       proxy: {
      //         "/api": {
      //           target: "http://localhost:9018",
      //           secure: false,
      //         },
      //       },
      //     },
      //     minify: {
      //       minifyCSS: true, // css压缩
      //       removeComments: true, // 移除注释
      //     },
      //     // 这个很重要，如果没有配置这段，也不会进行预编译
      //     renderer: new Renderer({
      //       inject: {
      //         foo: "bar",
      //       },
      //       headless: true,
      //       // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
      //       // renderAfterDocumentEvent: "render-event",
      //     }),
      //   })
      // );
    }
    if (process.env.VUE_APP_CURRENTMODE === "analyze") {
      plugins.push(new BundleAnalyzerPlugin());
    }
  },
  // 配置开发环境代理
  devServer: {
    host: "0.0.0.0",
    // https: true, // 是否开启https
    hot: true,
    proxy:
      process.env.VUE_APP_CURRENTMODE === "test"
        ? {
            "/api": {
              target: process.env.VUE_APP_PROXYURL, // 请求源地址
              ws: true, // 是否代理ws
              changeOrigin: true, // 是否跨域
              pathRewrite: {
                "^/api": "",
              },
            },
          }
        : null,
    before: (app) => {
      // 生成快速导航(也可写mock接口)
      app.get("/", (req, res, next) => {
        for (const i in Pages) {
          res.write(`<a target="_self" href="/${i.split('-')[0]}.html">${i.split('-')[0]}.html</a></br>`);
        }
        res.end();
      });
    },
  },
};
